<template>
	<view class="sort-view">
		<!--左边-->
		<view class="sort-left">
			<text>坚果炒货</text>
		</view>
		<!--右边-->
		<view class="sort-right">
			<view class="commodity">
				<view class="com-image">
					<image src="/static/detail/shuxing-img.png" mode="aspectFill"></image>
				</view>
				<view class="com-price">
					<text class="com-title over-text">标题标题</text>
					<text class="stock-view">库存 17</text>
					<text class="real-price">10.00</text>
					<view class="button-rig">
						<text class="shelf-true">下架</text>
					</view>
				</view>
			</view>

		</view>
	</view>
	<view class="manage">
		<text>管理分类</text>
		<text>添加商品</text>
	</view>
</template>

<script>
</script>

<style>
	.sort-view{
		display: flex;
	}
	.sort-left{
		width: 200rpx;
		text-align: center;
		background-color: #f6f6f6;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
	}
	
	.sort-left text{
		display: block;
		color: #5f5f5f;
		padding: 20rpx 0;
		border-bottom: 1px solid #FFFFFF;
		font-size: 28rpx;
	}
	.addto{
		background-color: #FFFFFF;
		font-weight: bold;
	}
	/* 右边 */
	.sort-right{
		margin: 0 20rpx 0 220rpx;
		flex: 1;
	}
	.com-image image{
		display: block;
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}
	.commodity text{
		display: block;
	}
	.commodity{
		display: flex;
		margin-bottom: 50rpx;
	}
	.com-price{
		flex: 1;
		padding-left: 20rpx;
	}
	.com-price view{
		display: flex;
		justify-content: flex-end;
	}
	.com-price view text:nth-child(2){
		margin-left: 50rpx;
	}
	.com-title{
		font-weight: bold;
	}
	.stock-view{
		padding: 10rpx 0;
		color: #c1c1c1;
		font-size: 26rpx;
	}
	.real-price{
		color: #b1865b;
		font-weight: bold;
	}
	.button-rig{
		padding-top: 20rpx;
	}
	.button-rig text{
		border-radius: 7rpx;
		padding: 7rpx 20rpx;
		font-size: 26rpx;
	}
	.shelf-true{
		color: #FFFFFF;
		background-color: #E64340;
	}
	.shelf-false{
		background-color: #F8F8F8;
		color: rgba(0, 0, 0, 0.2);
	}
	/* 底部 */
	.manage{
		position: fixed;
		bottom: 0;
		right: 0;
		left: 200rpx;
		display: flex;
		justify-content: space-between;
	}
	.manage text{
		width: 50%;
		text-align: center;
		padding: 20rpx 0;
	}
	.manage text:nth-child(1){
		background-color: antiquewhite;
	}
	.manage text:nth-child(2){
		background-color: aliceblue;
	}
</style>